<template>
	<view>
		<view class="">
			<view class="files-wrapper">				
				<view class="file-box file-add" v-if="fileList.length<5" @click="uploadFile">
					<uni-icons type="plusempty" size="25" color="#bbb"></uni-icons>
					<text>上传凭证(最多5张)</text>
				</view>
				<view class="file-box file-item" v-for="(file,index) in fileList">
					<image :src="file"></image>
					<view class="close" @click="close(index)">						
						<uni-icons type="clear" size="18"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"upload",
		data() {
			return {
				fileList:[],
				imgBase64:""
			};
		},
		watch:{
			fileList(newVal){
				this.$emit('fileListChange',newVal)
			}
		},
		methods:{
			close(index){
				this.fileList.splice(index,1)
			},
			uploadFile(){
				uni.chooseImage({
					count:1,
					sizeType:"compressed",
					success: (chooseImageRes) => {
						console.log(chooseImageRes)
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// #ifdef H5
						this.recursionCompressH5(tempFilePaths[0],(res)=>{
							this.upImg(res)
						})
						// #endif
						// #ifndef H5
							this.upImg(tempFilePaths[0])
						// #endif
					}
				});
			},
			upImg(url){
				uni.showLoading({
					title:"上传中...",
					mask:true
				})
				uni.uploadFile({
					url: 'https://api.ksii.cn/rest/wln/ali_upimg', //仅为示例，非真实的接口地址
					fileType:"image",
					fileName: 'file',
					filePath: url,
					success: (uploadFileRes) => {
						this.fileList.push(JSON.parse(uploadFileRes.data).data[0])
					},
					fail: (e) => {
						console.log("失败")
						console.log(e)
					},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			recursionCompressH5(url, callback) {
				let indexObj = this;
				uni.getImageInfo({
					src: url,
					success(res) {
						let canvasWidth = res.width; //图片原始长宽
						let canvasHeight = res.height;
						let img = new Image();
						img.src = res.path;
						let canvas = document.createElement("canvas");
						let ctx = canvas.getContext("2d");
						canvas.width = canvasWidth / 2;
						canvas.height = canvasHeight / 2;
						ctx.drawImage(img, 0, 0, canvasWidth / 2, canvasHeight / 2);
						canvas.toBlob(function (fileSrc) {
							let imgSrc = window.URL.createObjectURL(fileSrc);
							uni.getFileInfo({
								filePath: imgSrc,
								success:(resFileInfo) => {
									if (resFileInfo.size > 1024 * 1024) {
										//压缩后大于1M就继续压缩
										indexObj.recursionCompressH5(imgSrc, callback);
										return;
									} else {
										callback && callback(imgSrc)
									}
								},
							});
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.files-wrapper{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.file-box{
			width: 130rpx;
			height: 130rpx;
			box-sizing: border-box;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
			position: relative;
			text-align: center;
		}
		.file-item{
			image{
				width: 130rpx;
				height: 130rpx;
			}
			::v-deep .u-icon{
				position: absolute;
				right: -7px;
				top: -7px;
				z-index: 999;
			}
			.close{
				display: inline-block;
				position: absolute;
				right: -7px;
				top: -7px;
				z-index: 999;
			}
		}
		.file-add{
			padding-top: 4%;
			border: 1rpx #bbb dotted;
			display: flex;
			flex-direction: column;
			justify-content: center;
			text{
				width: 100%;
				text-align: center;
				font-size: 22rpx;
				transform: scale(.8);
				color: #bbb;
			}
			// text{
			// 	width: 80%;
			// 	position: absolute;
			// 	font-size: 22rpx;
			// 	transform: scale(.7);
			// 	left: 10%;
			// 	bottom: 0;
			// 	text-align: center;
			// 	color: #606266;
			// }
		}
	}
</style>
